import React from "react"
import ReactDOM from "react-dom"
require('./DialogAdress.less')

class DialogAdress extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            show_dialog: false
        }
    }

    componentWillMount(){
        
    }
    showDialog(){
        this.setState({
            show_dialog: true,
            fadein: true,
            fadeout: false,
        })
    }
    hideDialog(){
        this.setState({
            show_dialog: false,
            fadein: false,
            fadeout: true
        })
    }
    address() {
        const data = this.props.dataSource || {}
        return (
            <div className="header">
                <div className="row">
                    {/*<i className="iconfont icon-cuowu"></i>*/}
                    <div className="address-icon icon-get">
                        收
                    </div>
                    <div className="name">{data.recipent_name}</div>
                    <div className="address">{data.recipent_address}</div>
                    <i className="iconfont icon-jiantou1" onClick={this.showDialog.bind(this)}></i>
                </div>
                <div id="weui-actionsheet">
                </div>
            </div>
        )
    }
    makeAddressDialog() {
        const toggle =  this.state.show_dialog ? "weui-actionsheet_toggle" : ""
        const show_mask = this.state.show_dialog ? "" : " none"
        const data = this.props.dataSource || {}
        return (
            <div clssName="dialog-header">
                <div className={`weui-mask${show_mask}`} id="mask" onClick={this.hideDialog.bind(this)}></div>
                <div className={`weui-actionsheet reset-weui-as ${toggle}`} id="weui-actionsheet">
                    <div className="header content">
                        <div className="row">
                            <div className="address-icon icon-get">
                                收
                            </div>
                            <div className="name">{data.recipent_name}</div>
                            <div className="address">{data.recipent_address}
                                <p>{data.recipent_phone}</p>
                            </div>
                        </div>
                        <div className="row">
                            <div className="address-icon icon-send">
                                寄
                            </div>
                            <div className="name">{data.delivery_name}</div>
                            <div className="address">{data.delivery_address}
                                <p>{data.delivery_phone}</p>
                            </div>
                        </div>
                        <div className="arrow">
                            <i className="iconfont icon-jiantou1" onClick={this.hideDialog.bind(this)}></i>
                        </div>
                    </div>
                </div>
            </div>
        )
    }

    render() {
        if(this.props.dataSource === undefined){
            return null
        }else {
            return (
                <div className="dialog-address">
                    {this.makeAddressDialog()}
                    {this.address()}
                </div>
            )
        }
    }
}

module.exports = DialogAdress